<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>日期</title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->

		<!-- 日期选择框start -->
		<script type="text/javascript" src="../../libs/js/form/datePicker/WdatePicker.js"></script>
		<!-- 日期选择框end -->

	</head>

	<body>
		<div  class="page_content">

			<div class="groupTitle"><span>1、基本日期控件</span></div>

			<input type="text" class="date" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>2、选择日期+时间</span></div>

			<input type="text" class="date" style="width:250px;" dateFmt="yyyy-MM-dd HH:mm:ss" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>2、只选择时间</span></div>

			<input type="text" class="date" dateFmt="HH:mm:ss" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>4、自定义时间格式</span></div>

			<input type="text" class="date" style="width:250px;" dateFmt="yyyy年MM月dd日HH时mm分ss秒" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>5、日期控件默认有值</span></div>

			<input type="text" class="date" value="2012-07-08" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>6、选择今天之前</span></div>

			<input class="date" type="text" onfocus="WdatePicker({skin:themeColor,maxDate:'%y-%M-%d'})" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>7、日期控件动态赋值</span></div>

			<input type="text" class="date" id="date-7" /><br /><br />
			<input type="button" value="点击赋值" onclick="setValue()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>8、禁用/启用</span></div>

			<input type="text" class="date" disabled="true" id="date-8" />
			<br/><br/>
			<input type="button" value="启用" onclick="enableSelect()" />
			<input type="button" value="禁用" onclick="disableSelect()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>9、双日历</span></div>

			<input class="date" type="text" doubleCal="true" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>10、起止日期联动</span></div>

			<input type="text" id="beginTime" class="dateIcon" />
			<input type="text" id="endTime" class="dateIcon" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>11、选择今天以前</span></div>

			<input type="text" id="date-11" class="dateIcon" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>12、平面显示</span></div>

			<div id="div1"></div>

			<div class="height_15"></div>

			
		</div>
		<script type="text/javascript">
			var dateSkin = "blue";

			function initComplete() {
				//获取当前主题风格，用于设置日期控件的皮肤
				try {
					dateSkin = themeColor;
				} catch(e) {}

				//自定义点击触发日期控件
				document.getElementById('beginTime').onfocus = function() {
					var endtimeTf = $dp.$('endTime');
					WdatePicker({
						skin: dateSkin,
						onpicked: function() {
							endtimeTf.focus();
						},
						maxDate: '#F{$dp.$D(\'endTime\')}'
					});
				}
				document.getElementById('endTime').onfocus = function() {
					//这里设置了最大日期为当前日期，如果不需要则把maxDate:'%y-%M-%d'去掉
					WdatePicker({
						skin: dateSkin,
						minDate: '#F{$dp.$D(\'beginTime\')}'
					});
				}

				//平面显示
				WdatePicker({
					skin: dateSkin,
					eCont: 'div1',
					onpicked: function(dp) {
						top.Toast("showNoticeToast", '你选择的日期是:' + dp.cal.getDateStr())
					}
				})

				document.getElementById('date-11').onfocus = function() {
					WdatePicker({
						skin: dateSkin,
						maxDate: '%y-%M-%d'
					});
				}
			}

			//动态生成
			function createDate() {
				var $date = $('<br/><br/><input type="text" class="date" style="width:250px;" dateFmt="yyyy-MM-dd HH:mm:ss"/>');
				$("#testBtn").after($date);
				$date.render();
			}

			//设为不可用
			function disableSelect() {
				$("#date-8").attr("disabled", true);
			}
			//设为可用
			function enableSelect() {
				$("#date-8").attr("disabled", false);
			}

			//动态赋值
			function setValue() {
				$("#date-7").val("2012-07-08");
			}
		</script>
	</body>

</html>